UNIVERSITY  OF  MICHIGAN  SCHOOL  OF  INFORMATION 
SI  539:  Design  of  Complex  Web  Sites 

Assignment  2 - Basic  CSS 


Due  Date:  Tuesday  January  22,  2008  at  1 1:55PM 

Install  Mozilla  Firefox  and  Add-ons 

You  will  need  to  install  Firefox  on  your  computer  to  complete  this  assignment.  You  should  download 
and  install  Firefox  from: 

http://www.mozilla.com 

You  should  also  install  the  Web  Developer  add-on  from: 
https://addons.mozilla.org/en-US/firefox/addon/60 
Optionally  you  can  install  Firebug  as  well: 
https://addons.mozilla.org/en-US/firefox/addon/1843 

CSS  Deliverables 

The  purpose  of  this  assignment  is  to  add  CSS  styling  to  the  HTML  that  you  developed  in  the  first 
assignment.  This  assignment  very  much  follows  Chapter  3 of  the  Lloyd  book. 

Please  don't  just  clone  the  content  in  the  book  - write  up  your  own  simple  content  which  mimics  the 
structure  of  the  book's  content. 

• Your  CSS  should  be  in  a single  file  and  included  in  all  three  of  your  HTML  files.  There  should 
be  neither  inline  nor  embedded  CSS  in  your  HTML  files. 

• Your  CSS  should  validate  using  the  CSS  validator  at  http://iigsaw.w3.org/css-validator/ 

• Your  HTML  should  remain  XHTML  compliant  and  validate  at  http://validator.w3.org/ 

• Your  CSS  should  style  all  documents  in  a sans-serif  font  of  your  choosing. 

• Your  HTML  should  have  a background  color  other  than  the  default. 

• The  navigation  and  header  should  be  at  the  beginning  of  all  three  files  - when  you  navigate 
between  the  files  - it  should  appear  like  the  navigation  is  not  moving  - it  appears  on  the  same 
place  on  the  screen  for  all  three  files. 

• Your  text  should  be  a color  other  than  the  default. 

• You  should  style  your  <hl>  and  <h2>  tags  as  shown  in  page  1 10  of  the  text  - they  should 
have  a different  background  than  the  document  background.  You  can  pick  any  colors  that 
you  like. 


Your  CSS/HTML  should  demonstrate  an  example  of  styling  using  both  a class  and  an  id. 


• Your  HTML  must  include  styled  div  tags  and  styled  span  tags. 

• Your  HTML  must  include  a styled  tag  within  another  tag  similar  to  the  example  on  page 
107-108.  That  is,  you  should  have  a specific  style  that  is  only  triggered  when  it  is  within 
another  tag,  like  the  <p>  tag  within  the  <blockquote>  tag  on  pages  107-108. 

• You  must  style  all  of  your  links  - they  may  not  be  underlined. 

You  do  not  have  to  replicate  the  content  of  the  BubbleUnder  site.  You  can  make  up  any  content  you 
like  as  long  as  there  are  three  inter-linked  pages  and  they  demonstrate  everything  in  the  list  above. 

In  a way,  it  is  simpler  if  you  keep  your  content  simple  and  just  demonstrate  each  of  the  features 
above.  You  do  not  have  to  use  the  color  scheme  in  the  book  - pick  your  own  colors  and  make  it  look 
nice. 

Hand  In 

You  should  hand  the  following  in  using  CTools: 

•S  All  three  of  your  HTML  files  and  your  CSS  file  The  first  HTML  file  should  be  named 
index.html  or  index.htm. 

•/  A screen  shot  of  one  of  your  pages  in  a browser. 

•S  A screen  shot  of  another  of  your  pages  in  a browser,  with  the  “Outline  Block  Elements” 
feature  of  the  Web  Developer  plug-in  turned  on. 

•S  A screen  shot  of  your  CSS  successfully  validating  at  the  CSS  validator. 

•S  A screen  shot  of  one  of  your  HTML  pages  validating  at  the  HTML  validator. 


